// Base Styles
// -----------
.btn {
    display: inline-block;
    border: none;
    border-radius: .3em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                0 .25em .25em hsla(0,0%,0%,.05);
    color: #fff;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 1px;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
    user-select: none;

    &:active {
      box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .2),
                  inset 0 2px 0 hsla(0, 0%, 100%, .1),
                  inset 0 .25em .5em hsla(0, 0%, 0%, .05);
      margin-top: .25em;
      padding-bottom: .5em;
    }

    &:active,
    &:focus {
      outline: none;
    }
}

// Colors
// -----------
.btn--blue {
  background-color: $blue;
}
.btn--green {
  background-color: $green;
}
.btn--red {
  background-color: $red;
}

// Sizes
// -----------
.btn--lg {
  font-size: $large;
}
.btn--df {
  font-size: $default;
}
.btn--md {
  font-size: $medium;
}
.btn--sm {
  font-size: $small;
}
